<template>
  <ContainerGroup>
    <Container style="margin-bottom: 10px">
      <FilterForm
        ref="filterForm"
        :elements="filterElements"
        @submit="searchSubmit"
        @reset="resetForm"
      />
    </Container>
    <Container height="fill" :scroll-y="true" display="flexY">
      <div class="btnHeader">
        <OperationContainer style="margin-bottom: 10px; color: #555555">
          <el-upload
            ref="upload"
            style="display:inline-block;"
            :show-file-list="false"
            :on-change="handleFpjfChange"
            class="upload-demo"
            action
            :auto-upload="false"
          >
            <el-button type="primary" size="mini" :loading="dfpjfrLoading" class="btn-import el-icon-upload2">导入</el-button>
          </el-upload>
        </OperationContainer>
        <OperationContainer style="margin-bottom: 10px; color: #555555">
          <el-button :loading="mobanLoading" type="primary" size="mini" icon="add" @click="downExcel">下载模板</el-button>
          <!-- <el-button :loading="daochuLoading" type="primary" size="mini" icon="add" @click="downExcelTemplate">导出</el-button> -->
        </OperationContainer>
      </div>
      <el-table
        v-loading="tableLoading"
        :data="tableData"
        border
        :header-cell-style="{
          background: '#fafafa',
          borderColor: '#e7ecf8',
          color: '#555555',
        }"
        header-row-class-name="ck-table-header"
        row-class-name="ck-table-row"
        size="small"
        height="100%"
      >
        <el-table-column show-overflow-tooltip prop="pdeptCode" label="核算序号" />
        <el-table-column show-overflow-tooltip prop="pdeptName" label="科室名称" />
        <el-table-column show-overflow-tooltip prop="amount" label="非材料收入" />
        <el-table-column show-overflow-tooltip label="其他收入">
          <template slot-scope="scope">
            <div class="otherIncome" @click="rowEdit('其他收入', scope.row)">{{ scope.row.qtamount }}</div>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="total" label="收入合计" />
      </el-table>
      <!-- 分页 -->
      <!-- <Pagination
        :total="pageAttr.total"
        :page="pageAttr.currentPage"
        :page-size="pageAttr.pageSize"
        @pagation="pagationChange"
      /> -->
      <!-- 编辑 -->
      <Dialog
        class="editDialog"
        :title="title"
        :visible="dialogVisible"
        :footer-btns="dialogFooter"
        @cancel="handleCancel"
        @confirm="handleConfirm"
      >
        <div>
          <el-input v-model="editContent" placeholder="请输入内容" />
        </div>
      </Dialog>
    </Container>
  </ContainerGroup>
</template>

<script>
import { modifyPerformance, queryInComeVos, exportExcelJxCostDemo, importExcelJxCost } from '../../../utils/apis/performance/index.js'
export default {
  name: 'IncomeDetailForm', // 效益考核预算考核收入明细表
  components: {},
  data() {
    return {
      title: '',
      dialogVisible: false,
      pageAttr: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      },
      filterElements: [
        {
          key: 'dataTime',
          type: 'date-picker',
          mode: 'month',
          label: '月份',
          format: 'yyyy-MM',
          expiredDate: {},
          clearable: false,
          value: this.$util.currentDate(0),
          defaultValue: this.$util.currentDate(0)
        }
      ],
      tableData: [],
      tableLoading: false,
      dialogFooter: [
        {
          text: '保存',
          type: 'primary',
          trigger: 'confirm',
          loading: false
        },
        {
          text: '取消',
          type: 'info',
          trigger: 'cancel',
          loading: false
        }
      ],
      editContent: null,
      editRow: null,
      dfpjfrLoading: false,
      mobanLoading: false // 下载模板loading
    }
  },
  created() {},
  mounted() {
  },
  methods: {
    getData(val) {
      // 列表
      const params = { ...val }
      this.tableLoading = true
      queryInComeVos(params).then(res => {
        this.tableLoading = false
        if (res.data.code === 200) {
          this.tableData = res.data.data
        }
      }).catch(() => {
        this.tableLoading = false
      })
    },
    // 分页
    pagationChange(payload) {
      this.pageAttr.currentPage = payload.page
      this.pageAttr.pageSize = payload.pageSize
      this.getData()
    },
    searchSubmit(data) {
      // 查询
      if (data.dataTime) {
        data.year = data.dataTime.split('-')[0]
        data.month = data.dataTime.split('-')[1]
      } else {
        data.year = null
        data.month = null
      }
      this.getData(data)
    },
    // 编辑字段
    rowEdit(title, row) {
      this.title = title
      this.dialogVisible = true
      this.editContent = row.qtamount
      this.editRow = row
    },
    handleConfirm() {
      if (this.editContent === '' || this.editContent === undefined || this.editContent === null) {
        return this.$message.error('请输入内容')
      }
      if (isNaN(this.editContent * 1)) {
        return this.$message.error('请输入数值类型')
      }
      const { dataTime } = this.$refs.filterForm.getParms()
      if (!dataTime) {
        this.$message.warning('请选择年月')
        return
      }
      const year = dataTime.split('-')[0]
      const month = dataTime.split('-')[1]
      const { pdeptCode, pdeptName } = this.editRow
      const params = {
        year,
        month,
        accountCode: '3',
        accountName: this.title,
        deptCode: pdeptCode,
        deptName: pdeptName,
        amount: this.editContent * 1
      }
      this.dialogFooter[0].loading = true
      modifyPerformance(params).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message)
          this.handleCancel()
          this.updateForm()
        } else {
          this.$message.error(res.data.message)
        }
        this.dialogFooter[0].loading = false
      }).catch((err) => {
        this.$message.error(err)
        this.dialogFooter[0].loading = false
      })
    },
    handleCancel() {
      this.title = ''
      this.dialogVisible = false
      this.editContent = null
      this.editRow = null
      this.dialogFooter[0].loading = false
    },
    // 导入
    handleFpjfChange(file, fileList) {
      const fileType = file.name.substr(file.name.lastIndexOf('.')).trim()
      if (fileType !== '.xlsx' && fileType !== '.xls') {
        this.$message.warning('请选择Excel格式的文件导入！')
        return
      }
      const { dataTime } = this.$refs.filterForm.getParms()
      if (!dataTime) {
        this.$message.warning('请选择年月')
        return
      }
      const year = dataTime.split('-')[0]
      const month = dataTime.split('-')[1]
      const files = file.raw
      const formData = new FormData()
      formData.append('file', files)
      formData.append('year ', year)
      formData.append('month ', month)
      formData.append('type', '3')
      this.dfpjfrLoading = true
      importExcelJxCost(formData).then(res => {
        this.dfpjfrLoading = false
        if (res.data.code === 200) {
          this.$message.success('上传成功')
          this.searchSubmit({ dataTime })
        } else {
          this.$message.error(res.data.message)
        }
      }).catch(() => {
        this.dfpjfrLoading = false
      })
    },
    // 下载模板
    downExcel() {
      this.mobanLoading = true
      exportExcelJxCostDemo({ type: '2' }).then(res => {
        setTimeout(() => {
          this.mobanLoading = false
        }, 1000)
        if (res.data) {
          this.downloadFileFun(res.data, '收入明细模板.xlsx')
        }
      }).catch(() => {
        this.mobanLoading = false
      })
    },
    // 重置
    resetForm() {},
    updateForm() {
      const params = this.$refs.filterForm.getParms()
      this.searchSubmit(params)
    },
    // 模板下载公共方法
    downloadFileFun(res, name) {
      const blob = new Blob([res], {
        type: `${res.type}charset=utf-8`
      })
      const downloadLink = document.createElement('a')
      const URL = window.URL || window.webkitURL || window.moxURL
      const downUrl = URL.createObjectURL(blob)
      downloadLink.href = downUrl
      downloadLink.download = name
      downloadLink.click()
      window.URL.revokeObjectURL(downUrl)
    }
  }
}
</script>

<style lang="less" scoped>
.el-table--mini,
.el-table--small,
.el-table__expand-icon {
  font-size: 14px !important;
}

.ck-table-header {
  th {
    background: #fafafa !important;
    height: 48px;
    color: #555555 !important;
  }
}
.otherIncome{
  color: #2165f9;
  cursor: pointer;
  text-decoration: underline;
  min-width: 100%;
  min-height: 20px;
}
.editDialog.ck-dialog{
  /deep/.ck-dialog-container .ck-dialog-header{
    border-bottom:none;
    padding-bottom: 20px;
  }
  /deep/.ck-dialog-container .ck-dialog-footer{
    border-top: none;
    justify-content:flex-end;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  /deep/.ck-dialog-container {
    width: 30%;
    // top: 10vh !important;
  }
}
.btnHeader{
    display: flex;
    justify-content: space-between;
  }
</style>

